<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <th:block th:replace="common/header"></th:block>
    <th:block th:replace="common/nav"></th:block>

    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                导航管理
                <small>导航管理新增/修改</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">导航管理</a></li>
                <th th:if="${menuDto.mode==0}">
                <li><a href="#">导航添加</a></li>
                </th>
                <th th:if="${menuDto.mode==1}">
                <li><a href="#">导航编辑</a></li>
                </th>
                <th th:if="${menuDto.mode==2}">
                <li><a href="#">导航查看</a></li>
                </th>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <th th:if="${menuDto.mode==0}">
                            <h3 class="box-title">导航信息添加</h3>
                            </th>
                            <th th:if="${menuDto.mode==1}">
                            <h3 class="box-title">导航信息编辑</h3>
                            </th>
                            <th th:if="${menuDto.mode==2}">
                            <h3 class="box-title">导航信息查看</h3>
                            </th>
                        </div>
                        <!-- /.box-header -->
                        <!-- form start -->
                        <form class="form-horizontal" action="/xsMenu/operate" method="post">
                            <input type="hidden" name="menuId" th:value="${menuDto.menuId}">
                            <input type="hidden" id="mode" name="mode" th:value="${menuDto.mode}">
                            <div class="box-body">
                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">导航层级</label>

                                    <div class="col-sm-3">
                                        <select id="type" name="type"  class="form-control select2" style="width: 100%;" required="required">
                                            <th th:if="${menuDto.type == '1'}">
                                            <option value="1" selected="selected">一级</option>
                                            <option value="2">二级</option>
                                            </th>
                                            <th th:if="${menuDto.type == '2'}">
                                            <option value="1">一级</option>
                                            <option value="2" selected="selected">二级</option>
                                            </th>
                                            <th th:if="${menuDto.type == null}">
                                            <option selected="selected" value="">选择层级</option>
                                            <option value="1">一级</option>
                                            <option value="2">二级</option>
                                            </th>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <select id="pid" name="parentId" class="form-control select2" style="width: 100%;" required="required">
                                            <option selected="selected" value="0">选择上级</option>
                                        </select>

                                        <input type="hidden" id="parentId" th:value="${menuDto.parentId}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">名称</label>

                                    <div class="col-sm-3">
                                        <input type="text" name="menuName" th:value="${menuDto.menuName}" class="form-control" placeholder="系统导航" required="required" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">导航图标icon</label>
                                    <div class="col-sm-3">
                                        <input type="text" name="icon" th:value="${menuDto.icon}" class="form-control" placeholder="icon名称" required="required" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">导航地址url</label>
                                    <div class="col-sm-3">
                                        <input type="text" name="path" th:value="${menuDto.path}" class="form-control" placeholder="导航地址url" required="required" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">显示顺序</label>
                                    <div class="col-sm-3">
                                        <input type="number" step="1" name="orderNum" th:value="${menuDto.orderNum}" class="form-control" placeholder="显示顺序" required="required"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">导航位置</label>

                                    <div class="col-sm-3">
                                        <select id="localhost" name="localhost"  class="form-control select2" style="width: 100%;" required="required">
                                            <th th:if="${menuDto.localhost == 0}">
                                                <option value="0" selected="selected">后台</option>
                                                <option value="1">网站</option>
                                            </th>
                                            <th th:if="${menuDto.localhost == 1}">
                                                <option value="0">后台</option>
                                                <option value="1" selected="selected">网站</option>
                                            </th>
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <th th:if="${menuDto.mode==0}">
                                <a href="list" class="btn btn-default">取 消</a>
                                <button  type="submit" class="btn btn-info pull-right submit">提 交</button>
                                </th>
                                <th th:if="${menuDto.mode==1}">
                                <a href="list" class="btn btn-default">取 消</a>
                                <button type="submit" class="btn btn-info pull-right submit">提 交</button>
                                </th>
                                <th th:if="${menuDto.mode==2}">
                                <a href="list" class="btn btn-default">取 消</a>
                                <a href="list" class="btn btn-info pull-right">返 回</a>
                                </th>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>

                    <!-- /.box -->
                </div>
            </div>
            <!-- /.row -->
        </section>
    </div>

    <th:block th:replace="common/footer"></th:block>
</div>

<th:block th:replace="common/script"></th:block>
<script type="text/javascript">
    $(function() {
        $('#type').bind('change', function(data) {
            if($('#type').val()=='2') {
                getParent();
            } else {
                $('#pid').html('<option selected="selected" value="0">选择上级</option>');
            }
        });

        if($('#mode').val()==1) {
            if($('#type').val()==2) {
                getParent();
            }
        }
    });

    function getParent() {
        $.post('/xsMenu/parentMenu', function(data) {
            if(data) {
                $('#pid').html('');
                $('#pid').append('<option selected="selected" value="">选择上级</option>');
                for(var i=0;i<data.length;i++) {
                    $('#pid').append('<option value="'+data[i].menuId+'">'+data[i].menuName+'</option>');
                }

                if($('#mode').val()==1) {
                    $('#pid').val($('#parentId').val());
                }
            }
        });
    }

</script>
</body>
</html>
